import React, {useState} from 'react';
import {Card, Input, Button, message, Space, Typography, Divider} from 'antd';
import {SendOutlined, MessageOutlined, RobotOutlined, UserOutlined} from '@ant-design/icons';
import './ChatPage.css';

const {TextArea} = Input;
const {Title, Text} = Typography;

const ChatPage = () => {
    const [messages, setMessages] = useState([]);
    const [inputValue, setInputValue] = useState('');
    const [loading, setLoading] = useState(false);
    const [userId] = useState(1); // 暂时固定用户ID

    // 发送消息
    const handleSendMessage = async () => {
        if (!inputValue.trim()) {
            message.warning('请输入消息内容');
            return;
        }

        const userMessage = {
            id: Date.now(),
            type: 'user',
            content: inputValue.trim(),
            timestamp: new Date().toLocaleTimeString()
        };

        // 添加用户消息
        setMessages(prev => [...prev, userMessage]);
        setInputValue('');
        setLoading(true);

        try {
            // TODO: 调用AI接口
            // const response = await conversationAPI.sendMessage(userId, {
            //     sessionId: 'session_' + Date.now(),
            //     content: userMessage.content,
            //     enableWebSearch: false
            // });

            // 模拟AI响应
            setTimeout(() => {
                const aiMessage = {
                    id: Date.now() + 1,
                    type: 'ai',
                    content: 'AI助手功能正在开发中，敬请期待！\n\n目前可以提供：\n• 数据分析\n• 图表推荐\n• 业务建议\n• 趋势预测',
                    timestamp: new Date().toLocaleTimeString()
                };
                setMessages(prev => [...prev, aiMessage]);
                setLoading(false);
            }, 1000);

        } catch (error) {
            message.error('发送消息失败：' + error.message);
            setLoading(false);
        }
    };

    // 清空对话
    const handleClearChat = () => {
        setMessages([]);
        message.success('对话已清空');
    };

    return (
        <div className="chat-page">
            <div className="chat-header">
                <Title level={3}>
                    <MessageOutlined style={{marginRight: 8}}/>
                    AI数据分析助手
                </Title>
                <Text type="secondary">
                    智能分析您的物流数据，提供专业的业务建议
                </Text>
            </div>

            <Card className="chat-container">
                <div className="chat-messages">
                    {messages.length === 0 ? (
                        <div className="chat-empty">
                            <RobotOutlined style={{fontSize: 48, color: '#d9d9d9', marginBottom: 16}}/>
                            <Title level={4} type="secondary">开始对话</Title>
                            <Text type="secondary">
                                向AI助手询问关于数据分析、业务优化的问题
                            </Text>
                        </div>
                    ) : (
                        <div className="message-list">
                            {messages.map(message => (
                                <div key={message.id} className={`message-item ${message.type}`}>
                                    <div className="message-avatar">
                                        {message.type === 'user' ?
                                            <UserOutlined /> :
                                            <RobotOutlined />
                                        }
                                    </div>
                                    <div className="message-content">
                                        <div className="message-bubble">
                                            {message.content}
                                        </div>
                                        <div className="message-time">
                                            {message.timestamp}
                                        </div>
                                    </div>
                                </div>
                            ))}
                            {loading && (
                                <div className="message-item ai">
                                    <div className="message-avatar">
                                        <RobotOutlined />
                                    </div>
                                    <div className="message-content">
                                        <div className="message-bubble loading">
                                            正在思考中...
                                        </div>
                                    </div>
                                </div>
                            )}
                        </div>
                    )}
                </div>

                <Divider />

                <div className="chat-input">
                    <Space.Compact style={{width: '100%'}}>
                        <TextArea
                            value={inputValue}
                            onChange={(e) => setInputValue(e.target.value)}
                            placeholder="请输入您的问题..."
                            autoSize={{minRows: 1, maxRows: 4}}
                            onPressEnter={(e) => {
                                if (!e.shiftKey) {
                                    e.preventDefault();
                                    handleSendMessage();
                                }
                            }}
                            disabled={loading}
                        />
                        <Button
                            type="primary"
                            icon={<SendOutlined />}
                            onClick={handleSendMessage}
                            loading={loading}
                        >
                            发送
                        </Button>
                    </Space.Compact>
                    <div style={{marginTop: 8, textAlign: 'right'}}>
                        <Button size="small" onClick={handleClearChat}>
                            清空对话
                        </Button>
                    </div>
                </div>
            </Card>
        </div>
    );
};

export default ChatPage;